<template>
    <div :style="needShowActiveOcrText?rectStyle:{visibility: 'hidden'}"></div>
</template>

<script>

  export default {
    data () {
      return {
        rectStyle: {
          width: "0",
          height: "0",
          top: "0",
          left: "0"
        }
      };
    },
    watch: {
      activePosition: {
        handler (newVal) {
          if (!newVal) {
            return this.rectStyle = {};
          }
          let dom = document.getElementById("ocr-file-show") ? document.getElementById("ocr-file-show") : document.querySelector("#ocr-tifffile-show canvas");
          if (!dom) {
            this.rectStyle = {}
            return
          }
          let domWidth = dom.offsetWidth,
            pr = domWidth / newVal.fileWidth,
            domHeight = document.getElementById("ocr-img-content").clientHeight,
            scrollTop = document.getElementById("ocr-img-content").scrollTop;
          // 当元素在可视区域下方时
          if ((newVal.y * pr + newVal.h * pr - scrollTop) >= domHeight) {
            document.getElementById("ocr-img-content").scrollTop = Math.ceil(newVal.y * pr - domHeight + newVal.h * pr * 2)
          }
          // 当元素在可视区域上方时
          if (newVal.y * pr <= scrollTop) {
            document.getElementById("ocr-img-content").scrollTop = Math.ceil(newVal.y * pr / 2)
          }
          this.rectStyle = {
            width: newVal.w * pr + "px",
            height: newVal.h * pr + "px",
            top: newVal.y * pr + "px",
            left: newVal.x * pr + "px",
            position: "absolute"
          };
        },
        deep: true
      }
    },
    computed: {
      activePosition () {
        return this.$store.state.activeFile.activePosition;
      },
      needShowActiveOcrText () {
        return this.$store.state.status.needShowActiveOcrText;
      }
    },
  };
</script>

<style lang="less" scoped>
    div {
        &::after {
            content: '';
            display: block;
            border: 1px solid transparent;
            width: 100%;
            height: 100%;
            position: relative;
            opacity: 0.4;
            z-index: 1;
            background: @primary;
            border: 1px solid @primaryHover;
        }
    }
</style>
